iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 23
0
Modern Web

前端影片與直播筆記系列 第 23

Day23 西瓜播放器

  • 分享至 

  • xImage
  •  

今天來介紹西瓜播放器 (又稱 xgplayer )

西瓜播放器 是由中國西瓜視頻所開發維護的播放器。

xgplayer 播放器的特色有:

  1. Github 1005 顆星星
  2. 可支援多種格式、協議影片 ( MP4、HLS、WEBM、DASH..etc )
  3. 主張播放器萬物皆組件(Plugins) 可自由使用、擴增功能
  4. 文件齊全詳細(中文)
  5. 有官方自己推出的 React 、 Vue 版本可使用

安裝、引入 西瓜播放器

CDN

<script src="//cdn.jsdelivr.net/npm/xgplayer@1.1.3/browser/index.js" type="text/javascript"></script>

NPM

npm install xgplayer

快速入門:建立 西瓜播放器

HTML

<div id="video"></div>

JS

let player = new Player({
  id: 'video',
  url: 'http://www.html5videoplayer.net/videos/toystory.mp4'
});

至此便建立好西瓜播放器

建立播放器的配置與說明見此

事件 Events

西瓜播放器的事件監聽很簡單,和前幾天介紹的播放器差不多,都是

播放器物件.on(事件名, 之後執行的回呼函式)

例如

player.on("pause", ()=>{
  console.log("暫停")
})

事件名與其他參數說明見此

方法 Methods API

這裡列出幾個常見方法

方法 描述
.play( ) 播放
.pause( ) 暫停
.reload( ) 重新加載影片
.replay( ) 播放器重播
.destroy( ) 銷毀播放器物件

其他 Methods 方法說明見此
 
 
 
  

參考

西瓜播放器 官方github
西瓜播放器 官方文件


上一篇
Day22 Dplayer 播放器
下一篇
Day24 video-react
系列文
前端影片與直播筆記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言